<template>
  <div id="menuBar">
    <div class="menu-app block sm:hidden">
      <div class="menu-nav app" :class="{active:isActive}" @click="handleMenu">
          <span></span>
      </div>
      <transition name="fadein">
        <div v-if="isActive" class="w-full z-9 absolute left-0 top-20 shadow-md" key="box1">
          <Menu @handle="handleMenu" type="phone"/>
        </div>
      </transition>
    </div>
    <div class="hidden sm:block">
       <Menu type="pc"/>
    </div>
  </div>
</template>
<script>
import Menu from './menu.vue'
export default{
  name:'MenuBar',
  components:{Menu},
  data() {
    return {
      isActive:false
    }
  },
  methods:{
    handleMenu(){
        this.isActive = !this.isActive
    }
  }

}
</script>
<style lang="less">
#menuBar{
  .menu-app{
    height: 1.6rem;
    line-height: 1.6rem;
    width: 1.6rem;
    .menu-nav.app {
        font-size: 1rem;
        z-index: 6;
        position: relative;
        width: 100%;
        height: 100%;
        right: 10px;
        margin: auto;
        text-align: center;
        cursor: pointer;
        &:before {
            content: '';
            position: absolute;
            width: 1.6rem;
            height: 3px;
            border-radius: 3px;
            background-color: @primary-color;
            top: 16px;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            transition: all 0.3s ease-out;
        }
        &:after {
            content: '';
            position: absolute;
            width: 1.6rem;
            height: 3px;
            border-radius: 3px;
            background-color: @primary-color;
            top: -16px;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            transition: all 0.3s ease-out;
        }
        span {
            position: absolute;
            width: 1.6rem;
            height: 3px;
            border-radius: 3px;
            background-color: @primary-color;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            opacity: 1;
            transition: all 0.3s ease-out;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
        }
        &.active:before {
            transform: rotate(-45deg);
            transform-origin: 50% 50%;
            top: 0px!important;
        }
        &.active:after {
            transform: rotate(45deg);
            transform-origin: 50% 50%;
            top: 0px!important;
        }
        &.active > span {
            opacity: 0!important;
        }
        
    }
    
  } 
  .fadein-enter-active, .fadein-leave-active {
    transition: all .5s ease-in-out;
  }
  .fadein-enter, .fadein-leave,.fadein-leave-to {
    transform: translateY(-30px);
    opacity: 0;
  }

}


</style>

